<template>
  <div class="orderlist" ref="homePage">
    <div class="bj">
      <van-nav-bar title="全部订单" left-arrow @click-left="clickleft" />
    </div>

    <div style="width: 100%;height: 100px;"></div>
    <div class="Inquire">
      <van-dropdown-menu>
        <van-dropdown-item @change="changepiao" v-model="value1" :options="option1" />
        <van-dropdown-item @change="changelei" v-model="value2" :options="option2" />
      </van-dropdown-menu>
      <van-checkbox v-model="checked">有效订单</van-checkbox>
    </div>
    <div v-show="datalist.length == 0" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="datalist.length != 0" style="width: 100%;display: flex;flex-direction: column;">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="order_item" v-for="(item,indexs) in datalist" :key="indexs">
          <div class="order_types">
            <span>{{item.Category}}</span>
            <span style="font-size: 14px;">{{item.StatusStr}}</span>
          </div>
          <div class="order_detailed">
            <div class="detailed_img" @click="OrderDetail(item.ordSN)">
              <img :src="item.Resource.resCover">
              <div class="detailed_txt">
                <p style="font-size: 16px;    font-size: 16px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 70%;">{{item.Resource.resName}}</p>
                <p>下单时间：{{item.CreateDate}}</p>
                <p>数量：{{item.GoodsSumNum}}份</p>
              </div>
              <span style="color: #46d0ca;font-size: 18px;padding: 10px 0;">￥{{item.ordPayMoney}}</span>
            </div>
            <div class="order_price">
              <div v-for="(data,index) in item.canDoList" :key="index" @click="OrderDo(data,item.ordSN,index,indexs)">
                <span v-text="canDoList(data)"></span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- <v-min></v-min> -->

  </div>
</template>

<script>
import min from '@/views/Min.vue'
import {
  OrderList,
  OrderDo
} from '@/api/home.js'
export default {
  components: {
    "v-min": min,
  },
  data () {
    return {
      clintHeigth: '', //获取页面高度
      // active: this.$route.query.id,
      checked: true, //有限订单
      value1: 0,
      value2: 0,
      datalist: [],
      loading: false, //控制上拉加载的加载动画
      finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
      totalPage: 0,
      pageNumber: 0, //自定义一个变量
      option1: [{
        text: '全部订单',
        value: 0
      },
      {
        text: '景区门票',
        value: 1
      },
      {
        text: '酒店',
        value: 2
      },
      {
        text: '景酒',
        value: 3
      },
      {
        text: '活动',
        value: 4
      },
      {
        text: '精品路线',
        value: 5
      },
      {
        text: '特产',
        value: 6
      },
      {
        text: '优惠券',
        value: 8
      },
      ],
      option2: [{
        text: '全部订单',
        value: 0
      },
      {
        text: '待付款',
        value: 1
      },
      {
        text: '待发货',
        value: 2
      },
      {
        text: '已取消',
        value: 3
      },
      {
        text: '已完成',
        value: 4
      },
      {
        text: '退款/售后',
        value: 5
      },
      ]
    }
  },

  mounted () {
    this.onLoad()
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    // this.OrderList()
    this.value2 = Number(this.$route.query.id)
  },

  methods: {
    canDoList (type) {
      if (type == "Pay") {
        return '立即支付'
      } else if (type == "Delete") {
        return '删除订单'
      } else if (type == "Cancel") {
        return '取消订单'
      } else if (type == "ApplyRefund") {
        return '申请退款'
      } else if (type == "ApplyReturn") {
        return '申请退货'
      } else if (type == "ConfirmExpress") {
        return '确认收货'
      }
    },
    OrderDetail (ordSN) {
      this.$router.push({ //跳转订单详情
        path: "/User/UserOrderdetails",
        query: {
          ordSN: ordSN,
        }
      })
    },
    changepiao (value) {
      console.log(1)
      this.datalist = []
      this.pageNumber = 0;
      this.value1 = value;
      this.onLoad();
      this.$forceUpdate();



      //console.log(value)
    },
    changelei (value) {
      this.datalist = []
      this.pageNumber = 0;
      this.value2 = value;
      this.onLoad();
      this.$forceUpdate();
    },
    clickleft () {
      this.$router.go(-1)
    },

    onLoad () {
      let data = {
        resCategoryType: this.value1,
        orderstatus: this.value2,
        PageNo: this.pageNumber + 1,
      }
      OrderList(data).then(res => {
        console.log(res)
        // this.datalist = res.List
        this.totalPage = res.PageCount;
        if (res.List.length > 0) {
          this.datalist = this.datalist.concat(res.List);
          // this.datalist = res.List
        } else {
          this.datalist = res.List
        }
        this.loading = false;
        this.pageNumber++;
        if (this.pageNumber >= this.totalPage) {
          this.finished = true;
        }
      })
    },


    OrderDo (type, ordSN, index, indexs) {
      // this.typedata = type
      let data = {
        DoType: type,
        ordSN: ordSN,
      }
      console.log(data)
      if (type == 'Pay') {
        window.location.href = "https://www.anyiyou.cn/public/program/pay/auto.aspx?sns=" + ordSN
      } else if (type == 'ApplyReturn') {
        this.$router.push({ //跳转订单详情
          path: "/User/UserOrderdetails",
          query: {
            ordSN: ordSN,
          }
        })
      } else if (type == 'ApplyRefund') {
        this.$router.push({ //跳转订单详情
          path: "/User/UserOrderdetails",
          query: {
            ordSN: ordSN,
          }
        })
      } else {

        // console.log(res)
        this.$dialog.confirm({
          title: '确认操作',
        }).then(() => {
          // on close
          OrderDo(data).then(res => {
            if (res.Code == 0) {
              this.pageNumber = 0
              this.datalist = []
              this.onLoad();
            } else {
              this.$toast(res.Msg)
            }
          })
        }).catch(() => {
          // on cancel
        });



      }


    },
  }
}
</script>

<style lang="scss">
.orderlist {
  background: white;

  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .van-tabs {
    .van-tabs__wrap {
      .van-tabs__nav {
        .van-tabs__line {
          background-color: #46d0ca;
        }
      }
    }
  }

  .Inquire {
    display: flex;
    position: fixed;
    top: 46px;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-around;
    background: #46d0ca;
    color: white;
    z-index: 999;

    .van-dropdown-menu {
      height: 40px;
      width: 70%;
      border: 1px solid #46d0ca;

      // z-index: 9999;
      .van-dropdown-menu__title--active {
        color: #46d0ca !important;
      }
    }

    .van-checkbox__icon {
      .van-icon {
        background-color: white !important;
        border-color: white !important;
        color: white !important;
        font-size: 16px !important;
      }
    }

    .van-checkbox__icon--checked {
      .van-icon {
        background-color: white !important;
        border-color: white !important;
        color: #46d0ca !important;
      }
    }

    .van-checkbox__label {
      color: white;
    }
  }

  .order_item {
    width: 95%;
    margin: 0 auto;
    height: 175px;
    box-shadow: 0px 0px 4px 3px #eee;
    border-radius: 10px;
    margin-top: 20px;

    .order_types {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      border-bottom: 1px solid #eee;
    }

    .order_detailed {
      display: flex;
      height: 75%;
      // justify-content: space-between;
      flex-direction: column;

      .detailed_img {
        width: 100%;
        height: 75%;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;

        img {
          width: 30%;
          height: 90%;
        }

        .detailed_txt {
          width: 80%;
          padding: 0 5px;

          p {
            padding: 2px;
          }
        }
      }

      .order_price {
        width: 100%;
        display: flex;
        // flex-direction: column;
        flex-direction: row-reverse;
        height: 40px;
        div {
          width: 70px;
          height: 30px;
          line-height: 30px;
          background: #46d0ca;
          text-align: center;
          border-radius: 20px;
          color: white;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
